// 基础地址 设置成常数
const BASE_URL = 'http://110.41.43.118:3008';

// 登录状态 - 本地存储持久化
const USERNAME = localStorage.getItem('username');
const TOKEN = localStorage.getItem('token');

// 获取元素
let oWelcome = document.querySelector('.welcome');
let oLoginout = document.querySelector('.loginout');
let oLogin = document.querySelector('.login');
let oRegister = document.querySelector('.register');
// console.log(oWelcome);
// console.log(oLoginout);
// console.log(oLogin);
// console.log(oRegister);
let oCartList = document.querySelector('.cart-list');
let oCartMsg = document.querySelector('.cart-msg');
let oCartBtn = document.querySelector('.cart-btn');


// 验证登录状态
(function(){

	// 封装交互状态
	function loginStatusRender(welStatus='none', loginoutStatus='block', txt){
		oWelcome.style.display = welStatus;
		oWelcome.innerHTML = `
			欢迎，${txt}
			<!-- 用户子菜单 -->
			<ul class="user-subnav">
				<li><a href="">个人设置</a></li>
				<li><a href="address.html">收货信息</a></li>
				<li><a href="order.html">我的订单</a></li>
			</ul>
		`;
		oLoginout.style.display = welStatus;
		
		oLogin.style.display = loginoutStatus;
		oRegister.style.display = loginoutStatus;
	};
	
	if(USERNAME && TOKEN){
		loginStatusRender('block', 'none', USERNAME);
		
		// 调用购物车数据
		getCartValue();
		
	}else{
		loginStatusRender('none', 'block', '');
	};
	
	oLoginout.onclick = function(){
		console.log(oLoginout);
	}
	//点击退出按钮
	oLoginout.onclick = function(){
		console.log(oLoginout);
		// 清除本地存储
		localStorage.removeItem('username');
		localStorage.removeItem('token');
		// 交互
		loginStatusRender('none', 'block', '');
		// 显示暂无购物车
		oCartMsg.style.display = 'block';
		oCartList.style.display = 'none';
		// 交互文本
		oCartBtn.innerHTML = '快去抢购物良仓商品吧！';
		oCartBtn.onclick = null;
	};
	
	//点击登录按钮
	oLogin.onclick = function(){
		let goodsId = lb.getUrlValue('goodsId');
		let catId = lb.getUrlValue('catId');
		// 带参数的跳转
		location.href = goodsId ? `login.html?goodsId=${goodsId}&catId=${catId}` : 'login.html';
	};
	
})();

// 封装头部购物车方法
function getCartValue(){
	
	// 交互文本
	oCartBtn.innerHTML = '查看购物车';
	oCartBtn.onclick = function(){location.href = 'cart.html'};
	
	lb.ajax({
		method: 'post',
		url: BASE_URL + '/api_cart',
		data: {userId: TOKEN, status: 'viewcart'},
		success(res){
			// console.log(res);
			if(res.code != 0){
				console.log(res);
				return;
			}
			
			//购物车验证
			let cartCount = res.data.length;
			if(cartCount == 0){
				// 显示暂无购物车
				oCartMsg.style.display = 'block';
				oCartList.style.display = 'none';
				return;
			};
			
			//购物车有商品
			oCartMsg.style.display = 'none';
			oCartList.style.display = 'block';
			
			// 组装Dom
			let str = '';
			res.data.forEach(item => {
				str += `
					<li class="goods">
						<a href="product.html?goodsId=${item.goods_id}&catId=${item.cat_id}"><img src="${item.goods_thumb}" alt="" /></a>
						<div>
							<p>${item.goods_name}</p>
							<p></p>
							<p>
								<span>数量：${item.goods_number}件</span>
								<span>¥${parseInt(item.price * 0.9)}.00</span>
								<span>¥${item.price}</span>
							</p>
						</div>
					</li>
				`;
			})
			// 添加到界面
			oCartList.innerHTML = str;
			
		},
	});
};

// 数据
const CAT_DATA = [
	{cat_id: '0045', cat_name: '家居'},
	{cat_id: '0077', cat_name: '玩乐'},
	{cat_id: '0082', cat_name: '餐厨'},
	{cat_id: '0092', cat_name: '美食'},
	{cat_id: '0062', cat_name: '文具'},
	{cat_id: '0069', cat_name: '数码'},
	{cat_id: '0141', cat_name: '配饰'},
	{cat_id: '0154', cat_name: '美护'},
	{cat_id: '0166', cat_name: '出行'},
	{cat_id: '0182', cat_name: '图书'},
	{cat_id: '0214', cat_name: '艺术'},
	{cat_id: '0279', cat_name: '水具'},
	{cat_id: '0358', cat_name: '运动'},
	{cat_id: '0112', cat_name: '服装'},
	{cat_id: '0129', cat_name: '鞋包'},
];

// 搜索业务
(function(){
	// 获取搜索框元素
	let oSearchInput = document.querySelector('.search-content input');
	let oSearchBtn = document.querySelector('.search-content button');
	
	// 点击搜索按钮，聚焦在输入框
	oSearchBtn.onclick = function(){
		if(oSearchInput.value != ''){
			location.href = `search.html?keywords=${oSearchInput.value}`;
		}
		oSearchInput.focus();
	}
	
	oSearchInput.onkeyup = function(event){
		if(event.keyCode === 13){
			if(oSearchInput.value == ''){
				alert('搜索框不能为空');
				return;
			}
			// console.log(oSearchInput.value);
			location.href = `search.html?keywords=${oSearchInput.value}`;
			// console.log(`search.html?keywords=${oSearchInput.value}`);
		}
	}
	
})();


//分类导航业务
(function(){
	
	// 获取元素
	let oNavSubnavLeft = document.querySelector('.nav-subnav-left');

	// 页面打开就请求 商品分类导航 的数据
	lb.ajax({
		url : BASE_URL + '/api_cat',
		success(res){
			// console.log(res.data);
			
			// 验证请求结果
			if(res.code != 0){
				console.log(res);
				return;
			};
			
			//想要的结果
			let data = res.data;
			
			//遍历操作
			let str = '';
			data.forEach(item => {
				// 累加数据
				str += `
					<li cat-id="${item.cat_id}">
						<a href="classify.html?catId=${item.cat_id}&catName=${item.cat_name}" target="_blank">
							<img src="${item.cat_img}" alt="" />
							<p>${item.cat_name}</p>
						</a>
					</li>
				`;
			});
			// console.log(str);
			// 添加到对应的结构
			oNavSubnavLeft.innerHTML = str;
			
			// // 获取小分类的数据
			// lb.ajax({
			// 	url : BASE_URL + '/api_classify',
			// 	success(res){
			// 		console.log(res.data);
			// 		// 验证请求结果
			// 		if(res.code != 0){
			// 			console.log(res);
			// 			return;
			// 		};
					
			// 		let classifyAll = res.data;

			// 		// 子菜单交互  封装
			// 		let aLi = document.querySelectorAll('.nav-subnav .nav-subnav-left>li');
			// 		// console.log(aLi);
			// 		// 批量监听事件
			// 		// 鼠标移入
			// 		aLi.forEach(item => {
			// 			// 鼠标移入
			// 			item.onmouseenter = function(){
			// 				let okArr = classifyAll.filter(item => {
			// 					return item.cat_id == this.getAttribute('cat-id')
			// 				})
			// 				let strOk = '';
			// 				okArr[0].data.forEach(item => {
			// 					// console.log(item.product_content);
			// 					strOk += `
			// 						<li><a>${item.product_content}</a></li>
			// 					`;
			// 				});
			// 				oNavSubnavLeft.appendChild(strOk);
			// 			}
			// 		})
					
					
			// 	}
			// })
		}
	});
})();

// 返回顶部
(function(){
	
	let oBackTop = document.querySelector('.back-top');
	
	// 监听页面的卷动值
	document.onscroll = function(){
		// 验证卷动出去的值
		let scrollTop = document.documentElement.scrollTop;
		let isShow = scrollTop >= 300 ? 'block' : 'none';
		oBackTop.style.display = isShow;
	};
	// 点击事件 点击后页面卷动值为0
	oBackTop.onclick = function(){
		// 下策：闪现到最上面
		// document.documentElement.scrollTop = 0;
		
		// 感觉也是闪现
		// window.scrollTo({top: 0, behavior: 'smooth'});
		
		// 计时器 动画返回
		// 获取卷动值
		let scrollTop = document.documentElement.scrollTop;
		// 定时器
		let timer = setInterval(() => {
			// 累减
			scrollTop -= 100;
			// 判断卷动值是否小于等于 0
			if( scrollTop <= 0 ){
				scrollTop = 0;
				// 清除 timer 计时器
				clearInterval(timer);
			}
			// 设置卷动值
			document.documentElement.scrollTop = scrollTop;
		},10);
		
	}
	
	
})();


